<template>
  <div class="fix_container">
    <div class="fix_header_container">
      <!-- <div class="fix_title">维修管理</div> -->
      <el-form ref="form" :model="form" label-width="100px" class="fix_header" style="margin-bottom: 2px;">
        <el-form-item label="审批时间：" class="fix_content_select">
          <el-date-picker v-model="form.time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"
            class="fix_content_select_item">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" class="fix_content_button">查询</el-button>
        <el-button type="primary" style="margin-left: 0;" class="fix_content_button"
          @click="ToAddRepairApplication">新建</el-button>
      </el-form>
    </div>
    <!-- <el-divider></el-divider> -->
    <div class="fix_table_container">
      <div class="auto-archive-horizon"></div>
      <el-table :data="this.filtedTableData" style="width:100%" max-height="800"
        :default-sort="{ prop: 'id', order: 'descending' }">
        <el-table-column prop="repairOrderId" label="工单号" min-width="16%" sortable align="center">
        </el-table-column>
        <el-table-column prop="userName" label="申请人" min-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="submitTime" label="申请日期" min-width="20%" align="center">
        </el-table-column>
        <el-table-column prop="repairOrderStatus" label="工单状态" min-width="16%" align="center">
        </el-table-column>
        <el-table-column prop="profit" label="操作" min-width="16%" align="center">
          <template slot-scope="scope">
            <el-button @click="ToRepairOrderDetail(scope.row)" type="text" size="small">详情</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange"
        @current-change="handlePageChange" style="padding-right: 30px;" />
    </div>
  </div>
</template>
  
<style scoped>
.fix_container {
  margin: 0 auto;
  margin-top: 1%;
  width: 95%;
  height: 100%;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.fix_header_container {
  display: flex;
}

.fix_header {
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 20px auto;
  width: 85%;
}

.fix_title {
  font-size: xx-large;
  width: 20%;
}

.fix_content_select {
  margin: 0 0 0 30px;
  width: 28%;
}

.fix_content_select_item {
  width: 99%;
}

.fix_content_input {
  margin: 0;
  width: 28%;
}

.fix_content_button {
  margin: 0 20px;
}

.el-divider--horizontal {
  margin: 3px auto;
  height: 1px;
}

.fix_table_container {
  width: 90%;
  margin: 0 auto;
}

.auto-archive-horizon {
    margin: 20px 0 0 0;
    height: 1.5px;
    background-color: #ebeef5;
}

.pagination {
  width: 100%;
  margin: 25px auto;
  /* text-align: right; */
}
</style>
  
<script>
import { getFixOrder } from "@/api/order"
export default {
  name: 'fixView',
  data() {
    return {
      form: {
        time: null,
      },
      tableData: [],
      //分页相关数据
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 8, // 每页多少条
        total: 0 // 总记录数
      },
      BasicDataPage: null,
      pageSizes: [4, 8],
    }
  },
  computed: {
    filtedTableData() {
      if (!this.form.time) {
        return this.getPageList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
      } else {
        return this.getPageList(this.tableData.filter((value) => {
          const timeMatch = !this.form.time || value.submitTime.includes(this.form.time);
          return timeMatch;
        }), this.tablePage.pageNum, this.tablePage.pageSize)
      }
    },
    userId() {
      return localStorage.getItem("userId");
    },
    userRole() {
      return localStorage.getItem("currentRole");
    },
  },
  methods: {
    // 分页
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    },
    getPageList(data, num, size) {
      this.tablePage.total = data.length
      this.BasicDataPage = this.getList(data, num, size)
      return this.BasicDataPage
    },
    ToAddRepairApplication() {
      this.$router.push('/Home/RepairApplication')
    },
    initTableData() {
      getFixOrder(this.userId, this.userRole).then(res => {
        this.tableData = res.data.data;
      })
    },
    //展示维修工单详情
    ToRepairOrderDetail(row) {
      this.$router.push({
        path: "/Home/RepairOrderDetail",
        query: {
          repairOrderId: row.repairOrderId
        }
      });
    }
  },
  mounted() {
    this.initTableData();
  }
}
</script>
  